<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理-列表</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
<link rel="stylesheet" href="/resources/zTree/plugin/css/index.css" media="all">
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
</head>
<body class="childrenBody">
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">角色名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="name"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">角色备注</label>
		      <div class="layui-input-inline">
		        <input type="text" name="remark"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
		       <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
	  </div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格数据开始 -->
	<table class="layui-hide" id="roleList" lay-filter="roleList"></table>
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn" lay-event="add" shiro:hasPermission="role:create">添加</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update" shiro:hasPermission="role:update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm" lay-event="selectPermission" shiro:hasPermission="role:selectPermission">分配权限</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete" shiro:hasPermission="role:delete">删除</button>
	</div>
	<!-- 表格数据结束-->
	
	<!-- 添加。修改弹出层开始 -->
	<div id="dlg" style="display: none;margin: 10px">
		<form method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
			   <div class="layui-form-item">
			    <label class="layui-form-label">角色名称</label>
			    <div class="layui-input-block">
			      <input type="hidden" name="id">
			      <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">角色备注</label>
			    <div class="layui-input-block">
			           <textarea placeholder="请输入角色备注" name="remark"  class="layui-textarea"></textarea>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">是否可用</label>
			      <div class="layui-input-inline">
			      		<input type="radio" name="available" value="1" title="是" checked="" >
      					<input type="radio" name="available" value="0" title="否" >
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item" style="text-align: center;">
			      <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			      <button type="reset" class="layui-btn layui-btn-warm">重置</button>
			  </div>
		</form>
	</div>
	<!-- 添加。修改弹出层结束 -->
	
	<!-- 分配权限的弹出层开始 -->
	<div id="selectPermission" style="padding: 10px;display: none;">
		<div id="permissionTree" class="ztree"></div>
		<div style="text-align: center;">
			<button class="layui-btn" id="saveRolePermssion">确认分配</button>
		</div>
	</div>
	<!-- 分配权限的弹出层结束 -->
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.excheck.min.js"></script>

<script type="text/javascript">
var tableIns;
var roleIndex;
layui.use([ 'layer', 'jquery', 'table', 'form' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	var form = layui.form;
	//渲染表格
	 tableIns = table.render({
		elem : '#roleList', //渲染表格的容器
		url : '/role/loadAllRole', //请求数据的地址
		cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		page : true, //开启分页
		toolbar : '#tableToolBar',//设置表头左上角的工具条  并开启表头右上角的工具栏
		defaultToolbar : [ 'filter', 'print' ], //设置工具栏的位置和是否显示
		height:'430px',
		cols : [ [ /* { type : 'checkbox', width : 80 },  */
			{ field : 'id', title : 'ID', align : 'center'},
			{field : 'name',title : '角色名称',align : 'center'},
			{field : 'remark',title : '角色备注',align : 'center'},
			{field : 'available',align : 'center',title : '是否可用',templet:function(d){
				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
			}}, 
			{width : 250,title : '操作',align : 'center',toolbar : "#tableCellToolBar",fixed : 'right',align : 'center'
		} ] ]
	});

	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/role/loadAllRole?'+params,
			page : {
				curr : 1
			}
		});
	})
	
	//监听表头事件
	table.on('toolbar(roleList)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      openAdd();
	    break;
	  };
	});
	//监听行工具条
	table.on('tool(roleList)', function(obj){ 
	  var data = obj.data; 
	  var layEvent = obj.event; 
	  if(layEvent === 'update'){ 
		  openUpdate(data);
	  } else if(layEvent === 'delete'){ //删除
	    layer.confirm('真的要删除【'+data.name+'】这个角色么？', function(index){
	    	$.post("/role/deleteRole",{id:data.id},function(obj){
	    		if(obj.code==200){
	      			layer.close(index);
	      			//刷新表格
	      			tableIns.reload();
	    		}
	    		layer.msg(obj.msg);
	    	})
	    });
	  }else if(layEvent==='selectPermission'){
		  openSelectPermission(data);//传入当前分配的角色对象
	  }
	});
	//打开添加的弹出层
	var url=""
	var mainIndex;//弹出层的索引
	 function openAdd(){
		 mainIndex=layer.open({
			title:'添加角色',
			type:1,
			area:['700px','500px'],
			content:$("#dlg"),
			success:function(layero, index){
				$("#dataFrm")[0].reset();
				url="/role/addRole";
			}
		});
	}
	//打开修改弹出层
	function openUpdate(data){
		 mainIndex=layer.open({
				title:'修改角色',
				type:1,
				area:['700px','500px'],
				content:$("#dlg"),
				success:function(layero, index){
					$("#dataFrm")[0].reset();
					//加载默认数据
					form.val('dataFrm',data);
					url="/role/updateRole";
				}
			});
	}
	//做保存
	form.on("submit(doSubmit)",function(data){
		var params=$("#dataFrm").serialize();
		$.post(url,params,function(obj){
			if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				//刷新表格
				tableIns.reload();
			}else{
				layer.msg(obj.msg);
			}
		});
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	//打开分配角色的弹出层
	function openSelectPermission(data){
		roleIndex=layer.open({
			title:'分配【'+data.name+"】的权限",
			content:$("#selectPermission"),
			area:['350px','500px'],
			type:1,
			success:function(layero, index){
				//查询所有的权限[包含了菜单和权限]
				$.post("/role/loadRolePermissionSelect",{id:data.id},function(zNodes){
					//初始化树
					initTree(zNodes,data.id);
				});
			}
		})
	}
});
var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		check: {
			enable: true
		}
	};
var rid;
function initTree(zNodes,id){
	$.fn.zTree.init($("#permissionTree"), setting, zNodes);
	rid=id;
};
$("#saveRolePermssion").click(function(){
	var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
	var nodes = treeObj.getCheckedNodes(true);
	//角色id
	var params="?id="+rid;
	if(nodes.length>0){
		for(var i=0;i<nodes.length;i++){
			params+="&ids="+nodes[i].id;
		}
	}
	//保存
	$.post("/role/saveRolePermission"+params,function(obj){
			layer.msg(obj.msg);
			layer.close(roleIndex);
	});
})
</script>
</html>